<style lang="less">
  .show-edit-btn{
    display: none;
    margin-left: -10px;
  }
  .ivu-table-cell:hover .show-edit-btn{
    display: inline-block;
  }
  .page-table-con {
    box-sizing: content-box;
  }
</style>
<template>
  <Row>
    <div class="page-table-con">
      <Table border :ref="refs" :loading="loading" :columns="columns" :data="thisTableData" @on-selection-change="selectChange" stripe></Table>
    </div>
    <div style="width:50%; margin-top: 15px; height: 35px; overflow: hidden; float: left;">
      <Button type="error" size="small" @click="handleDelBatch" v-if="this.isBatchDelButton">删除</Button>
      <Button type="primary" size="small" @click="handleChangeStatusBatch('enable')" v-if="isBatchChangeStatusButton">启用</Button>
      <Button type="warning" size="small" @click="handleChangeStatusBatch('disable')" v-if="isBatchChangeStatusButton">禁用</Button>
    </div>
    <div style=" margin-top: 15px; height: 35px; overflow: hidden; float: right;">
        <Page :total="total" :current="currentPage" :page-size="pageSize" placement="top" size="small" @on-change="changePage" show-total show-elevator></Page>
    </div>
  </Row>
</template>
<script>
const editButton = (vm, h, currentRow, index) => {
  return h('Button', {
    props: {
      type: 'primary',
      size: 'small'
    },
    style: {
      margin: '0 5px'
    },
    on: {
      'click': () => {
        // vm.$emit('input', vm.handleBackdata(vm.thisTableData))
        vm.$emit('on-edit', vm.handleBackdata(vm.thisTableData), index)
      }
    }
  }, '编辑')
}
const deleteButton = (vm, h, currentRow, index) => {
  return h('Poptip', {
    props: {
      confirm: true,
      title: '您确定要删除这条数据吗?',
      transfer: true
    },
    on: {
      'on-ok': () => {
        // vm.thisTableData.splice(index, 1) 根据业务逻辑去掉了马上就删除的操作,需要服务端返回状态后再进行对应的删除
        // vm.$emit('input', vm.handleBackdata(vm.thisTableData))
        vm.$emit('on-delete', vm.handleBackdata(vm.thisTableData), index)
      }
    }
  }, [
    h('Button', {
      style: {
        margin: '0 5px'
      },
      props: {
        type: 'error',
        placement: 'top',
        size: 'small'
      }
    }, '删除')
  ])
}

export default {
  name: 'pageTable',
  props: {
    refs: String,
    columnsList: Array,
    value: Array,

    //  当前页码
    currentPage: {
      type: Number,
      default: 4
    },
    //  总条数
    total: {
      type: Number,
      default: 200
    },
    pageSize: {
      type: Number,
      default: 20
    },
    // 加载状态
    loading: Boolean,
    // 是否显示批量删除按钮
    isBatchDelButton: {
      type: Boolean,
      default: false
    },
    // 是否显示批量改变状态按钮
    isBatchChangeStatusButton: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      columns: [],
      thisTableData: [],
      //  多选框选中的编号
      selectIds: [],
      //  多选框所有的编号
      selectAllIds: []
    }
  },
  methods: {
    init () {
      let vm = this
      this.thisTableData = JSON.parse(JSON.stringify(this.value))

      this.columnsList.forEach(item => {
        if (item.handle) {
          item.render = (h, param) => {
            let currentRowData = this.thisTableData[param.index]
            let children = []
            item.handle.forEach(item => {
              if (item === 'edit') {
                children.push(editButton(this, h, currentRowData, param.index))
              } else if (item === 'delete') {
                children.push(deleteButton(this, h, currentRowData, param.index))
              }
            })
            return h('div', children)
          }
        }
      })
      this.columns = this.columnsList
    },
    handleBackdata (data) {
      return JSON.parse(JSON.stringify(data))
    },
    //  改变Page控件的回调函数
    changePage (page) {
      this.$emit('on-change-page', page)
    },

    //  多选框只要选中项发生变化时就会触发
    selectChange (res) {
      let ids = []
      res.forEach(function (item, index) {
        ids[index] = parseInt(item.id)
      })
      this.selectIds = ids
      this.$emit('get-select-ids', this.selectIds)
    },

    //  批量删除按钮
    handleDelBatch () {
      this.$emit('on-delete-batch', this.selectIds)
    },
    //  批量改变状态按钮
    handleChangeStatusBatch (type) {
      this.$emit('on-change-status-batch', this.selectIds, type)
    }
  },
  created() {
    this.init()
  },
  watch: {
    value (data) {
      this.init()
    }
  }
}
</script>
